<template>
  <div class="records">
    <van-nav-bar title="上报记录" />
    
    <div class="page-content">
      <van-dropdown-menu>
        <van-dropdown-item v-model="filter.status" :options="statusOptions" />
        <van-dropdown-item v-model="filter.date" :options="dateOptions" />
      </van-dropdown-menu>
      
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="record-item" v-for="(item, index) in records" :key="index" @click="viewDetail(item)">
            <div class="record-title">{{ item.title }}</div>
            <div class="record-info">
              <div class="record-location">
                <van-icon name="location-o" /> {{ item.location }}
              </div>
              <div class="record-time">
                <van-icon name="clock-o" /> {{ item.time }}
              </div>
            </div>
            <div class="record-footer">
              <van-tag :type="getStatusType(item.status)">{{ item.status }}</van-tag>
              <div class="record-severity">严重程度: {{ item.severity }}</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      
      <van-empty v-if="records.length === 0" description="暂无上报记录" />
    </div>
  </div>
</template>

<script>
export default {
  name: "RecordsView",
  data() {
    return {
      filter: {
        status: "全部",
        date: "全部时间"
      },
      statusOptions: [
        { text: "全部", value: "全部" },
        { text: "待处理", value: "待处理" },
        { text: "已处理", value: "已处理" },
        { text: "已拒绝", value: "已拒绝" }
      ],
      dateOptions: [
        { text: "全部时间", value: "全部时间" },
        { text: "今天", value: "今天" },
        { text: "本周", value: "本周" },
        { text: "本月", value: "本月" }
      ],
      records: [
        { 
          id: 1,
          title: "管道焊接接头不符合标准", 
          location: "A区3号管道", 
          time: "2023-06-15 10:30", 
          status: "待处理",
          severity: "严重"
        },
        { 
          id: 2,
          title: "管道涂层损坏", 
          location: "B区1号管道", 
          time: "2023-06-14 15:45", 
          status: "已处理",
          severity: "中"
        },
        { 
          id: 3,
          title: "管道支架安装不规范", 
          location: "C区2号管道", 
          time: "2023-06-13 09:20", 
          status: "已拒绝",
          severity: "轻微"
        }
      ],
      loading: false,
      finished: true,
      refreshing: false
    };
  },
  methods: {
    getStatusType(status) {
      switch (status) {
        case "待处理": return "warning";
        case "已处理": return "success";
        case "已拒绝": return "danger";
        default: return "primary";
      }
    },
    onLoad() {
      // 加载更多数据
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    onRefresh() {
      // 刷新数据
      setTimeout(() => {
        this.refreshing = false;
      }, 1000);
    },
    viewDetail(item) {
      this.$toast(`查看记录: ${item.id}`);
      // 这里可以跳转到详情页
    }
  }
};
</script>

<style scoped>
.records {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-content {
  margin-top: 46px;
  flex: 1;
  overflow-y: auto;
}

.record-item {
  background-color: #fff;
  margin: 10px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.record-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.record-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #646566;
  margin-bottom: 8px;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-severity {
  font-size: 14px;
  color: #646566;
}
</style> 